<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-tabbar :activeValue="activeValue" async @asyncChange="handleAsyncChange">
                <pure-tabbar-item v-for="item in tabbar" :key="item.name" :item="item"></pure-tabbar-item>
            </pure-tabbar>
        </a-demo>

        <a-demo title="自定义颜色">
            <pure-tabbar :activeValue="activeValue" async @asyncChange="handleAsyncChange" color="#666666" activeColor="#ff0000">
                <pure-tabbar-item v-for="item in tabbar" :key="item.name" :item="item"></pure-tabbar-item>
            </pure-tabbar>
        </a-demo>

        <a-demo title="切换前的拦截函数">
            <pure-tabbar :activeValue="activeValue" :beforeChange="handleBeforeChange">
                <pure-tabbar-item v-for="item in tabbar" :key="item.name" :item="item"></pure-tabbar-item>
            </pure-tabbar>
        </a-demo>

        <a-demo title="结合徽标组件使用">
            <pure-tabbar :activeValue="activeValue" async @asyncChange="handleAsyncChange">
                <pure-tabbar-item v-for="item in tabbar" :key="item.name" :item="item">
                    <pure-badge mode="dot" class="pure-badge-danger"></pure-badge>
                </pure-tabbar-item>
            </pure-tabbar>
            <a-gap></a-gap>
            <a-gap></a-gap>
            <pure-tabbar :activeValue="activeValue" async @asyncChange="handleAsyncChange">
                <pure-tabbar-item v-for="item in tabbar" :key="item.name" :item="item">
                    <pure-badge value="8" class="pure-badge-warning"></pure-badge>
                </pure-tabbar-item>
            </pure-tabbar>
        </a-demo>

        <a-demo title="禁用">
            <pure-tabbar :activeValue="activeValue" async @asyncChange="handleAsyncChange">
                <pure-tabbar-item v-for="item in tabbar" :key="item.name" :item="item" :disabled="item.disabled"></pure-tabbar-item>
            </pure-tabbar>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 标签栏
    const tabbar = ref([
        { name: "首页", icon: "__dianpu_2", activeIcon: "__dianpu_2", path: "/pages/home/index" },
        { name: "分类", icon: "__fenlei_6", activeIcon: "__fenlei_6", path: "/pages/category/index" },
        { name: "聊天", icon: "__pinglun_3", activeIcon: "__pinglun_3", path: "/pages/chat/index" },
        { name: "购物车", icon: "__gouwu", activeIcon: "__gouwu", path: "/pages/car/index", disabled: true },
        { name: "我的", icon: "__wode", activeIcon: "__wode", path: "/pages/mine/index" },
    ]);

    // 选中项
    const activeValue = ref("首页");

    // 演示示例切换使用异步切换，要不就切走了
    function handleAsyncChange(tab) {
        activeValue.value = tab.name;
    }

    // 切换前的拦截函数
    function handleBeforeChange(tab) {
        uni.showLoading({
            title: `切换到'${tab.name}'标签页`,
        });

        return new Promise((resolve) => {
            setTimeout(() => {
                activeValue.value = tab.name;
                uni.hideLoading();
                resolve(true);
            }, 2500);
        });
    }
</script>

<style scoped>
    .content {
        --pure-badge-height: 1.25em;
    }
</style>
